<template>
  <div class="talk-wrapper">
    <div class="talk-list" ref="talkListRef" @wheel="handleContainerWheel">
      <template v-if="talkList.length > 0">
        <div 
          v-for="(item, index) in talkList" 
          :key="index"
          :class="item.type === 'client' ? 'client-talk-item' : 'service-talk-item'"
        >
          <div class="left" v-if="item.type === 'service'"><p >{{ item.value }}</p></div>
          <div class="left" v-else></div>
          <div class="right" v-if="item.type === 'client'">{{ item.value }}</div>
          <div class="right" v-else></div>
        </div>
      </template>
    </div>
    <div class="input-wrapper">
      <div class="editor-wrapper">
        <textarea id="story" rows="5" cols="33" placeholder="请输入你想对我说的话" v-model="content" class="editor" @keydown.enter.prevent="sendMsg"></textarea>
      </div>
      <div class="bottom-wrapper">
        <el-button type="primary" @click="sendMsg" class="bottom-btn" :disabled="content.length === 0">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
// 包
import { ref, nextTick, watch, computed, onBeforeUnmount } from 'vue'
import { v4 as uuidv4 } from 'uuid';
// 工具
import aiTalkListInstance from '@/utils/operatorAITalk'

// 唯一id暂时无用 以后未知
const id = uuidv4();
// 操作对话框
const ai = aiTalkListInstance()

const talkListRef = ref(null)
const content = ref('')
// 计算属性得到对话列表
const talkList = computed(()=> ai.aiTalkingList.value)
// 发送消息
const sendMsg = async () => {
  // 更新用户对话框内容
  ai.clinetCtx(content.value, id)
  try {
    // 转存是为了实现立即清空的效果
    const currentContent = content.value;
    content.value = '';
    // 更新AI对话框内容
    ai.serviceCtxRequest(currentContent)
  } catch (error) {
    console.log(error);
  }
}

// 监听消息列表变化，自动滚动到底部
const unwatch = watch(() => ai.aiTalkingList.value, () => {
  scrollToBottom()
},{ deep: true })

// 向上滚动取消监听 结束持续向下滚动的能力
const handleContainerWheel = (e) => {
  e.stopPropagation();
  if (e.deltaY < 0) {
    unwatch()
  }
}
// 组件销毁时，取消监听
onBeforeUnmount(() => {
  unwatch()
})
// 滚动到底部的方法
const scrollToBottom = () => {
  nextTick(() => {
    if (talkListRef.value) {
      talkListRef.value.scrollTop = talkListRef.value.scrollHeight
    }
  })
}
</script>
<style scoped>
.talk-wrapper{
  width: 800px;
  height: 500px;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid black;
  background-color: lightcyan;
}
.talk-wrapper .talk-list{
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}
.talk-wrapper .talk-list .client-talk-item{
  display: flex;
  width: 100%;
}
.talk-wrapper .talk-list .client-talk-item .left{
  width: 50%;
}
.talk-wrapper .talk-list .client-talk-item .right{
  width: 50%;
  text-align: right
}
.talk-wrapper .talk-list .service-talk-item{
  display: flex;
  width: 100%;
}
.talk-wrapper .talk-list .service-talk-item .left{
  width: 50%;
}
.talk-wrapper .talk-list .service-talk-item .right{
  width: 50%;
}
.input-wrapper{
  display: flex;
  width: 600px;
  height: 100px;
  position: absolute;
  bottom: 10px;
  left: 100px;
  border-radius: 20px;
}
.editor-wrapper{
  width: 520px;
  height: 100%;
}
.editor-wrapper .editor{
  width: 500px;
  height: 80%;
  border: 0;
  padding: 0;
  margin: 10px 0 0 20px;
  font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  /* 禁用拖拽调整大小，同时隐藏右下角标识 */
  resize: none;
}
.editor-wrapper .editor:focus{
  outline: none;
}
.bottom-wrapper{
  line-height: 100px;
  text-align: center;
}
.bottom-wrapper .bottom-btn{
  height: 80px;
}
.talk-list::-webkit-scrollbar {
  width: 6px;
}
.talk-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.talk-list::-webkit-scrollbar-thumb {
  background: #7f828a;
  border-radius: 3px;
}
.talk-list::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
.editor::-webkit-scrollbar {
  width: 6px;
}
.editor::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.editor::-webkit-scrollbar-thumb {
  background: #7f828a;
  border-radius: 3px;
}
.editor::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
</style>